<template>
  <div v-if="baseData != undefined" class="box">
    <el-row>
      <el-col :span="12">
        <el-image :src="baseData.goods.picUrl" fit="cover" style="width:100%;height: 430px;" />
      </el-col>
      <el-col :span="12" class="conten-right">
        <span style="font-weight: bold;font-size: 22px;">{{ baseData.goods.name }}</span><br>
        <span style="color: #999999;line-height: 36px;">{{ baseData.goods.brief }}</span>
        <el-row style="color: #999;padding:0 12px;margin-top:20px;font-size: 14px;">
          <el-col :span="3" style="line-height: 31px;">商品规格</el-col>
          <el-col :span="20">
            <el-radio-group v-model="serverType" text-color="#fc461e" fill="#fc461e" size="mini">
              <el-radio v-for="(spe,index) in baseData.specifications" :key="index" :label="spe.value" border>{{ spe.specification }}</el-radio>
            </el-radio-group>
          </el-col>
        </el-row>
        <el-row style="color: #999;padding:0 12px;margin-top: 20px;">
          <el-col :span="3" style="line-height: 31px;font-size: 14px;">
            数&nbsp;&nbsp;&nbsp;&nbsp;量
          </el-col>
          <el-col :span="20">
            <el-input-number v-model="num" size="mini" :min="1" :max="10" label="描述文字" />
          </el-col>
        </el-row>
        <el-row style="padding:0 12px;margin-top: 20px;line-height: 31px;">
          <el-col :span="3" style="color: #999;font-size: 14px;">费用总计
          </el-col>
          <el-col :span="20" style="color:#fc4666">￥<span style="font-size: 26px">{{ handlePrice }}</span>
          </el-col>
        </el-row>
        <el-row style="position: absolute;bottom: 30px;padding-left: 40px;">
          <el-col :span="8">
            <el-button type="primary" style="width: 150px;" plain @click="fastadd">立即购买</el-button>
          </el-col>
          <el-col :span="16">
            <el-button type="primary" style="width: 150px;" plain @click="addCart">加入购物车</el-button>
          </el-col>
          <el-col style="color: #999;line-height: 40px;font-size: 9px;margin-top: 30px;" :span="24">服务承诺：&nbsp;&nbsp;&nbsp;&nbsp;	按时按质&nbsp;&nbsp;&nbsp;&nbsp;全程公开透明&nbsp;&nbsp;&nbsp;&nbsp; 平安保险提供保障</el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row :span="24" style="margin-top: 50px;">
      <el-tabs type="border-card">
        <el-tab-pane label="服务介绍">
          <div v-html="baseData.goods.detail" />
        </el-tab-pane>
      </el-tabs>
    </el-row>
  </div>
</template>

<script>
import { detailGoods } from '@/api/mall/goods'
import { add, fastadd } from '@/api/webSite/ApiCart'
export default {
  name: 'GoogView',
  data() {
    return {
      id: undefined,
      serverType: 1,
      num: 1,
      baseData: undefined
    }
  },
  computed: {
    handlePrice() {
      let price = 0
      this.baseData.products.forEach(pro => {
        if (pro.specifications.indexOf(this.serverType) > -1) {
          price = pro.price
        }
      })
      return price * this.num
    },
    productId() {
      let productId = 0
      this.baseData.products.forEach(pro => {
        if (pro.specifications.indexOf(this.serverType) > -1) {
          productId = pro.id
        }
      })
      return productId
    }
  },
  mounted() {
    this.id = this.$route.query.id
    detailGoods(this.id).then(res => {
      this.baseData = res.data.data
      this.serverType = this.baseData.specifications[0].value
    })
  },
  methods: {
    addCart() {
      add({ goodsId: this.baseData.goods.id, productId: this.productId, number: this.num }).then(res => {
        this.$message.success('添加成功')
      })
    },
    fastadd() {
      fastadd({ goodsId: this.baseData.goods.id, productId: this.productId, number: this.num }).then(res => {
        this.$router.push('/theme1/orderView?cartId=' + res.data.data)
      })
    }
  }
}
</script>
<style>
  .conten-right .el-radio {
    margin-left: 0!important;
    margin-bottom: 5px;
  }
  .conten-right .el-radio-group {
  }
  /*.conten-right .el-radio__input.is-checked+.el-radio__label {*/
  /*  color: #fc461e;*/
  /*}*/
  /*.conten-right .el-radio__input.is-checked .el-radio__inner {*/
  /*  border-color: #fc461e;*/
  /*  background: #fc461e;*/
  /*}*/
  /*.conten-right .el-radio.is-bordered.is-checked {*/
  /*  border-color: #fc461e;*/
  /*}*/
</style>
<style scoped>
.box{
  padding: 20px;
  font-family: "Microsoft Yahei","微软雅黑","\5FAE\8F6F\96C5\9ED1";
}
.conten-right {
  padding: 0 20px;
  height: 430px;
  position: relative;
}
</style>
